<template>
  <div>
    <Header title="数据质量分析"></Header>
    <div class="page__main bg-white">
      <div class="page__scroller">
        <div class="water-mark-wrap">
          <div class="title-bg">
            {{datePicker.showData}}数据质量分析
            <button type="button" class="title-bg__btn" @click="tipDialog.show = true"></button>
          </div>
          <van-sticky :offset-top="46">
            <div class="pd-aside bg-white" style="padding-top: 10px;">
              <div class="selects" style="margin-bottom: 0">
                <div class="selects__item selects__item--date" @click="chooseDate">
                  {{datePicker.showData}}
                </div>
                <div class="selects__item" @click="chooseCity('province')">
                  {{areaInfo.showArea}}
                </div>
                <div class="selects__item" @click="chooseCity('city')">
                  {{cityInfo.showArea}}
                </div>
              </div>
            </div>
          </van-sticky>
          <van-tabs v-model="tabActiveName" class="init-tabs resolve-tabs" sticky :offset-top="89">
            <van-tab name="a" title="订单绑定资源匹配">
              <div class="box">
                <div class="projects mgb-15">
                  <div class="projects__main">
                    <div class="projects__item" v-for="(item, index) in order.type" :key="index" style="width: 50%">
                      <span
                        class="projects__inner"
                        :class="order.active == item.id ? 'projects__inner--current' : ''"
                        @click="handleChangeTabs('order', item.id)"
                      >
                        {{item.name}}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="case-title mgb-15">
                  <span class="case-title__name">稽核情况汇总</span>
                </div>
                <div class="business-intro">
                  <div class="business-intro__main">
                    <div
                      class="business-intro__item"
                      v-for="(item, index) in summaryData.data"
                      :key="index"
                    >
                      <div
                        class="business-intro__inner"
                        :class="summaryData.active == item.id ? 'business-intro__inner--current' : ''"
                        @click="handleTypeChange(item.id)"
                      >
                        <div class="business-intro__intro">{{item.name}}</div>
                        <div class="mgb-4">
                          <van-loading size="14px" v-show="summaryData.dataLoading"></van-loading>
                          <span class="business-intro__num">{{numFormat(item.num)}}</span>
                          {{item.unit}}
                        </div>
                        <div>
                          环比
                          <span class="trend" :class="changeRankClass(item.percentage)">{{item.percentage}}{{item.percentageUnit}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="case-title">
                  <span class="case-title__name">{{summaryData.selectName}}</span>
                </div>
                <div style="height: 240px;" class="mgb-10">
                  <BarLine :data="barLineData"></BarLine>
                </div>
                <div class="case-title">
                  <span class="case-title__name">异常订单和白名单比例趋势</span>
                </div>
                <div style="height: 180px;">
                  <LinesChart :data="linesData"></LinesChart>
                </div>
              </div>
              <div class="footer-tip mgb-15">了解更多信息，请登录PC端运营数据展示系统</div>
            </van-tab>
            <van-tab name="b" title="沉淀固化进度">
              <div class="box">
                <div class="projects mgb-15">
                  <div class="projects__main">
                    <div class="projects__item" v-for="(item, index) in progress.type" :key="index" style="width: 33.3%">
                      <span
                        class="projects__inner"
                        :class="progress.active == item.id ? 'projects__inner--current' : ''"
                        @click="handleChangeTabs('progress', item.id)"
                      >
                        {{item.name}}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="case-title mgb-15">
                  <span class="case-title__name">沉淀固化{{progress.activeName}}进度总览</span>
                </div>
                <div class="data-panel mgb-8">
                  <div class="data-panel__item" v-for="(item, index) in orderProgress" :key="index">
                    <div class="data-panel__name">
                      <slot v-if="progress.active == '1'">{{item.name}}</slot>
                      <slot v-else-if="progress.active == '2'">{{item.name1}}</slot>
                      <slot v-else-if="progress.active == '3'">{{item.name2}}</slot>
                    </div>
                    <div class="data-panel__blocks">
                      <div class="data-panel__block">
                        <van-loading size="14px" v-show="orderProgressLoading"></van-loading>
                        <span class="data-panel__num">{{numFormat(item.num)}}</span>{{item.unit}}
                      </div>
                      <div class="data-panel__block">
                        环比：<span class="trend" :class="changeRankClass(item.percent)">{{item.percent}}{{item.percentUnit}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <van-tabs v-model="orderProgressTab.active" class="init-tabs mgb-10">
                  <van-tab name="a" title="整体情况">
                    <div style="height: 240px">
                      <BarLine :data="orderProgressTotal"></BarLine>
                    </div>
                  </van-tab>
                  <van-tab name="b" title="日变化趋势">
                    <div style="height: 240px">
                      <BarLine :data="orderProgressTrend"></BarLine>
                    </div>
                  </van-tab>
                </van-tabs>
                <div class="case-title">
                  <span class="case-title__name">沉淀固化{{progress.activeName}}进度详情</span>
                </div>
                <van-tabs v-model="orderProgressTab.detailActive" class="init-tabs">
                  <van-tab name="a" title="沉淀固化详情">
                    <div style="height: 180px">
                      <PieChart :data="pieDataDetail"></PieChart>
                    </div>
                  </van-tab>
                  <van-tab name="b" title="其中:上报审核详情" v-if="progress.active == '1'">
                    <div style="height: 180px">
                      <PieChart :data="pieDataCheck"></PieChart>
                    </div>
                  </van-tab>
                </van-tabs>
                <div class="case-title mgb-15">
                  <span class="case-title__name">沉淀固化{{progress.activeName}}变动详情</span>
                </div>
                <div class="data-panel mgb-15">
                  <div class="data-panel__item" v-for="(item, index) in orderChange" :key="index">
                    <div class="data-panel__name">
                      <slot v-if="progress.active == '1'">{{item.name}}</slot>
                      <slot v-else-if="progress.active == '2'">{{item.name1}}</slot>
                      <slot v-else-if="progress.active == '3'">{{item.name2}}</slot>
                    </div>
                    <div class="data-panel__blocks">
                      <div class="data-panel__block">
                        <van-loading size="14px" v-show="orderChangeLoading"></van-loading>
                        <span class="data-panel__num">{{numFormat(item.num)}}</span>{{item.unit}}
                      </div>
                      <div class="data-panel__block">
                        环比：<span class="trend" :class="changeRankClass(item.percent)">{{item.percent}}{{item.percentUnit}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div>整体情况</div>
                <div style="height: 240px;">
                  <BarLine :data="orderChangeTotal"></BarLine>
                </div>
              </div>
              <div class="footer-tip mgb-15">了解更多信息，请登录PC端运营数据展示系统</div>
            </van-tab>
          </van-tabs>
          <WaterMark :length="7"></WaterMark>
        </div>
      </div>
    </div>
    <van-popup
      v-model="datePicker.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePicker.currentDate"
        type="date"
        :min-date="datePicker.minDate"
        :max-date="datePicker.maxDate"
        @cancel="handleCanleDate"
        @confirm="handleConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <van-popup
      v-model="areaInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="areaInfo.columns"
        :defaultIndex='areaInfo.defaultIndex'
        @cancel="cancelFn('province')"
        @confirm="confirmFnProvince"
      ></van-picker>
    </van-popup>
    <van-popup
      v-model="cityInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="cityInfo.columns"
        :defaultIndex='cityInfo.defaultIndex'
        @cancel="cancelFn('city')"
        @confirm="confirmFnCity"
      ></van-picker>
    </van-popup>
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list">
            <div class="tip-dialog__item" v-for="(item, index) in tipDialog.list" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header"
import Choose from "@/components/Choose"
import WaterMark from '@/components/WaterMark'
import BarLine from '@/components/BarLineChartScroll'
import LinesChart from '@/components/LinesChart'
import PieChart from '@/components/PieChart'

export default {
  components: {
    Header,
    WaterMark,
    Choose,
    BarLine,
    LinesChart,
    PieChart
  },
  data() {
    return {
      tabActiveName: 'a',
      areaId: this.$store.state.userInfo.home_city,
      userInfo: this.$store.state.userInfo,
      role: sessionStorage.getItem('role'),
      datePicker: {
        showData: '--年--月--日',
        selectDate: '',
        show: false,
        currentDate: new Date(),
        minDate: new Date(),
        maxDate: new Date(),
      },
      areaInfo: {
        show: false,
        defaultIndex: 0,
        showArea: '',
        selectId: this.$store.state.userInfo.home_city,
        columns: []
      },
      cityInfo: {
        show: false,
        defaultIndex: 0,
        showArea: "地市",
        selectId: "0",
        columns: []
      },
      summaryData: {
        active: '1',
        dataLoading: false,
        selectName: '异常订单情况',
        data: [
          {
            name: '异常订单数量',
            num: '',
            unit: '个',
            id: '1',
            percentage: '',
            percentageUnit: '%'
          },
          {
            name: '异常订单占订单总数比',
            num: '',
            unit: '%',
            id: '2',
            percentage: '',
            percentageUnit: 'PP'
          },
          {
            name: '白名单数量',
            num: '',
            unit: '个',
            id: '3',
            percentage: '',
            percentageUnit: '%'
          },
          {
            name: '白名单占订单总数比',
            num: '',
            unit: '%',
            id: '4',
            percentage: '',
            percentageUnit: 'PP'
          },
          {
            name: '已修正异常订单数',
            num: '',
            unit: '个',
            id: '5',
            percentage: '',
            percentageUnit: '%'
          },
          {
            name: '已修正订单占异常订单比',
            num: '',
            unit: '%',
            id: '6',
            percentage: '',
            percentageUnit: 'PP'
          },
        ]
      },
      partLineData: {
        data: [],
        unit: '个',
      },
      partBarData: {
        data: [],
        unit: '个',
      },
      order: {
        active: '1',
        type: [
          {name: '铁塔', id: '1'},
          {name: '机房', id: '2'},
        ]
      },
      progress: {
        active: '1',
        activeName: '订单',
        type: [
          {name: '订单', id: '1'},
          {name: '铁塔', id: '2'},
          {name: '机房', id: '3'},
        ]
      },
      tipDialog: {
        show: false,
        list: [
          {
            title: '铁塔异常订单数量',
            detail: '当前统计时间点已起租的铁塔异常订单数量'
          },
          {
            title: '铁塔白名单数量',
            detail: '上报铁塔白名单后审核通过并提交的订单数量'
          },
          {
            title: '铁塔异常订单占订单总数比',
            intro: '当前统计时间点已起租的铁塔异常订单数量/当前统计时间点已起租的订单总数'
          },
          {
            title: '铁塔白名单占订单总数比',
            intro: '上报铁塔白名单后审核通过并提交的订单数量/当前统计时间点已起租的订单总数'
          },
          {
            title: '铁塔已修正的异常订单数',
            detail: '20190921账期的铁塔“异常”订单，在统计日期变为“正常”及“白名单”的订单数量'
          },
          {
            title: '铁塔已修正异常订单占异常订单比',
            intro: '铁塔已修正的异常订单数/截止到2019年9月21日塔类已起租异常订单的累计值'
          },
          {
            title: '机房异常订单数量',
            detail: '当前统计时间点已起租的机房异常订单数量'
          },
          {
            title: '机房白名单数量',
            detail: '上报机房白名单后审核通过并提交的订单数量'
          },
          {
            title: '机房异常订单占订单总数比',
            intro: '当前统计时间点已起租的机房异常订单数量/当前统计时间点已起租的订单总数'
          },
          {
            title: '机房白名单占订单总数比',
            intro: '上报机房白名单后审核通过并提交的订单数量/当前统计时间点已起租的订单总数'
          },
          {
            title: '机房已修正的异常订单数',
            detail: '20190921账期的机房“异常”订单，在统计日期变为“正常”及“白名单”的订单数量'
          },
          {
            title: '机房已修正异常订单占异常订单比',
            intro: '机房已修正的异常订单数/截止到2019年9月21日塔类已起租异常订单的累计值'
          },
          {
            title: '已起租塔类订单数量',
            detail: '统计期已起租的塔类标准业务订单'
          },
          {
            title: '沉淀固化塔类订单数量',
            intro: '统计期内新增系统自动沉淀固化塔类订单数+上报沉淀固化塔类订单数'
          },
          {
            title: '沉淀固化塔类订单占已起租塔类订单比',
            detail: '沉淀固化塔类订单数量/已起租塔类订单数量'
          },
          {
            title: '系统自动沉淀固化塔类订单数量',
            detail: '统计期内起租时间在2020年1月1日至统计期内塔类标准业务订单数合计值'
          },
          {
            title: '上报审核沉淀固化塔类订单数量',
            detail: '统计期内省公司上报的沉淀固化打标订单数合计值'
          },
          {
            title: '有条件一致订单数量',
            detail: '统计期内针对上报审核沉淀固化塔类订单中有条件一致的订单数量'
          },
          {
            title: '无条件一致订单数量',
            detail: '统计期内针对上报审核沉淀固化塔类订单中无条件一致的订单数量'
          },
          {
            title: '沉淀固化塔类订单变动数量',
            detail: '截止统计期的上一个上报批次，已沉淀固化的塔类订单在上周发生“站址编码”或“铁塔产品类型”或“机房产品类型”变动的订单数量'
          },
          {
            title: '系统自动沉淀固化塔类订单变动数量',
            detail: '截止统计期的上一个上报批次，系统自动沉淀固化的塔类订单在上周发生“站址编码”或“铁塔产品类型”或“机房产品类型”变动的订单数量'
          },
          {
            title: '上报审核沉淀固化塔类订单变动数量',
            detail: '截止统计期的上一个上报批次，上报审核沉淀固化的塔类订单在上周发生“站址编码”或“铁塔产品类型”或“机房产品类型”变动的订单数量'
          },
          {
            title: '铁塔资源数量',
            detail: '统计期资源系统铁塔资源数量'
          },
          {
            title: '沉淀固化铁塔资源数量',
            intro: '2020年1月1日后新增铁塔资源ID条数+上报沉淀固化铁塔资源ID条数'
          },
          {
            title: '沉淀固化铁塔资源占铁塔资源比',
            intro: '沉淀固化铁塔资源数量/铁塔资源数量'
          },
          {
            title: '系统自动沉淀固化铁塔资源数量',
            detail: '资源系统录入时间为2020年1月1日至统计期内，未删除的铁塔资源ID总数（上报和系统固化重复的资源，以上报为准）'
          },
          {
            title: '上报审核沉淀固化铁塔资源数量',
            detail: '省公司上报沉淀固化的铁塔资源ID总数'
          },
          {
            title: '沉淀固化铁塔资源变动数量',
            detail: '截止统计期的上一个上报批次，已沉淀固化的铁塔资源在上周发生“站址编码”或“铁塔细分类型”或“塔高”或“铁塔产权性质”变动的铁塔资源数量'
          },
          {
            title: '系统自动沉淀固化铁塔资源变动数量',
            detail: '截止统计期的上一个上报批次，系统自动沉淀固化的铁塔资源在上周发生“站址编码”或“铁塔细分类型”或“塔高”或“铁塔产权性质”变动的铁塔资源数量'
          },
          {
            title: '上报审核沉淀固化铁塔资源变动数量',
            detail: '截止统计期的上一个上报批次，上报审核沉淀固化的铁塔资源在上周发生“站址编码”或“铁塔细分类型”或“塔高”或“铁塔产权性质”变动的铁塔资源数量'
          },
          {
            title: '机房资源数量',
            detail: '统计期资源系统机房资源数量'
          },
          {
            title: '沉淀固化机房资源数量',
            intro: '2020年1月1日后新增机房资源ID条数+上报沉淀固化机房资源ID条数'
          },
          {
            title: '沉淀固化机房资源占机房资源比',
            intro: '沉淀固化机房资源数量/机房资源数量'
          },
          {
            title: '系统自动沉淀固化机房资源数量',
            detail: '资源系统录入时间为2020年1月1日至统计期内，未删除的机房资源ID总数（上报和系统固化重复的资源，以上报为准）'
          },
          {
            title: '上报审核沉淀固化机房资源数量',
            detail: '省公司上报沉淀固化的机房资源ID总数'
          },
          {
            title: '沉淀固化机房资源变动数量',
            detail: '截止统计期的上一个上报批次，已沉淀固化的机房资源在上周发生“站址编码”或“机房细分类型”或“机房产权性质”变动的机房资源数量'
          },
          {
            title: '系统自动沉淀固化机房资源变动数量',
            detail: '截止统计期的上一个上报批次，系统自动沉淀固化的机房资源在上周发生“站址编码”或“机房细分类型”或“机房产权性质”变动的机房资源数量'
          },
          {
            title: '上报审核沉淀固化机房资源变动数量',
            detail: '截止统计期的上一个上报批次，上报审核沉淀固化的机房资源在上周发生“站址编码”或“机房细分类型”或“机房产权性质”变动的机房资源数量'
          },
        ]
      },
      orderProgressLoading: false,
      orderProgress: [
        {
          name: '已起租塔类订单数量',
          name1: '铁塔资源数量',
          name2: '机房资源数量',
          num: '',
          unit: '个',
          percent: '',
          percentUnit: '%',
        },
        {
          name: '沉淀固化塔类订单数量',
          name1: '沉淀固化铁塔资源数量',
          name2: '沉淀固化机房资源数量',
          num: '',
          unit: '个',
          percent: '',
          percentUnit: '%',
        },
        {
          name: '沉淀固化塔类订单占已起租塔类订单比',
          name1: '沉淀固化铁塔资源占铁塔资源比',
          name2: '沉淀固化机房资源占机房资源比',
          num: '',
          unit: '%',
          percent: '',
          percentUnit: 'PP',
        }
      ],
      orderProgressTab: {
        active: 'a',
        detailActive: 'a'
      },
      orderChangeLoading: true,
      orderChange: [
        {
          name: '沉淀固化塔类订单变动数量',
          name1: '沉淀固化铁塔资源变动数量',
          name2: '沉淀固化机房资源变动数量',
          num: '',
          unit: '个',
          percent: '',
          percentUnit: '%',
        },
        {
          name: '系统自动沉淀固化塔类订单变动数量',
          name1: '系统自动沉淀固化铁塔资源变动数量',
          name2: '系统自动沉淀固化机房资源变动数量',
          num: '',
          unit: '个',
          percent: '',
          percentUnit: '%',
        },
        {
          name: '上报审核沉淀固化塔类订单变动数量',
          name1: '上报审核沉淀固化铁塔资源变动数量',
          name2: '上报审核沉淀固化机房资源变动数量',
          num: '',
          unit: '个',
          percent: '',
          percentUnit: '%',
        }
      ],
      barLineData: {
        bottom: 25,
        round: 6,
        ys: true,
        stack: false,
        dataX: [],
        data: [
          {
            name: '异常订单数',
            type: 'bar',
            unit: '个',
            color: ['#FF3737', '#FFADAD'],
            values: []
          },
          {
            name: '异常订单占订单总数比',
            color: "#ff8200",
            type: 'line',
            unit: '%',
            values: []
          },
        ]
      },
      linesData: {
        unit: '%',
        dataX: [],
        data: [
          {
            name: '白名单占订单总数比',
            values: [],
          },
          {
            name: '异常订单占订单总数比',
            values: [],
          }
        ]
      },
      orderProgressTotal: {
        bottom: 45,
        round: 6,
        ys: true,
        stack: false,
        dataX: [],
        data: [
          {
            name: '已起租塔类订单数量',
            type: 'bar',
            unit: '个',
            color: ['#FF3737', '#FFADAD'],
            values: []
          },
          {
            name: '沉淀固化塔类订单数量',
            type: 'bar',
            unit: '个',
            color: ['#57b1f9', '#66ddfa'],
            values: []
          },
          {
            name: '沉淀固化塔类订单占已起租塔类订单比',
            color: "#ff8200",
            type: 'line',
            unit: '%',
            values: []
          },
        ]
      },
      orderProgressTrend: {
        bottom: 45,
        round: 6,
        ys: true,
        stack: false,
        labelXTextStyle: 'normal',
        dataX: [],
        data: [
          {
            name: '已起租塔类订单数量',
            type: 'bar',
            unit: '个',
            color: ['#FF3737', '#FFADAD'],
            values: []
          },
          {
            name: '沉淀固化塔类订单数量',
            type: 'bar',
            unit: '个',
            color: ['#57b1f9', '#66ddfa'],
            values: []
          },
          {
            name: '沉淀固化塔类订单占已起租塔类订单比',
            color: "#ff8200",
            type: 'line',
            unit: '%',
            values: []
          },
        ]
      },
      orderChangeTotal: {
        bottom: 45,
        round: 0,
        ys: false,
        stack: true,
        dataX: [],
        data: [
          {
            name: '系统自动沉淀固化塔类订单变动数量',
            type: 'bar',
            unit: '个',
            color: ['#FF3737', '#FFADAD'],
            values: []
          },
          {
            name: '上报审核沉淀固化塔类订单变动数量',
            type: 'bar',
            unit: '个',
            color: ['#57b1f9', '#66ddfa'],
            values: []
          },
        ]
      },
      pieDataDetail: {
        unit: '个',
        data: []
      },
      pieDataCheck: {
        unit: '个',
        data: []
      }
    };
  },
  methods: {
    numFormat(num) {
      return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
    },
    //显示地市弹框
    chooseCity(area) {
      if (area == 'province') {
        this.areaInfo.show = true
      } else if (area == 'city') {
        this.cityInfo.show = true
      }
    },
    //取消地市弹框
    cancelFn(area) {
      if (area == 'province') {
        this.areaInfo.show = false
      } else if (area == 'city') {
        this.cityInfo.show = false
      }
    },
    //确认省份
    confirmFnProvince(item, index) {
      if (this.areaInfo.selectId != item.id) {
        this.areaInfo.selectId = item.id
        this.areaId = item.id
        this.areaInfo.showArea = item.text
        this.cityInfo.columns = []
        this.cityInfo.showArea = '地市'
        if (this.role == 'province') {
          if (this.areaId != '100000') {
            this.areaInfo.columns = []
            this.getAreaInfo()
          } else {
            this.cityInfo.columns = [{text: '地市', id: '0'}]
          }
        } else {
          this.getAreaInfo()
        }
        this.initPage()
      }
      this.areaInfo.show = false
    },
    //确认地市
    confirmFnCity(item, index) {
      if (this.cityInfo.selectId != item.id) {
        this.cityInfo.selectId = item.id
        this.cityInfo.showArea = item.text
        if (this.cityInfo.selectId != '' && this.cityInfo.selectId != 0) {
          this.areaId = item.id
        } else {
          this.areaId = this.areaInfo.selectId
        }
        this.initPage()
      }
      this.cityInfo.show = false
    },
    //切换
    handleChangeTabs(type, id) {
      if (type == 'order') {
        if (this.order.active != id) {
          this.order.active = id
          this.getSummaryData()
          this.getLinesData()
          this.getBarLineData()
        }
      } else if (type == 'progress') {
        if (this.progress.active != id) {
          this.progress.active = id
          if(this.progress.active == '1') {
            this.progress.activeName = '订单'
          } else if (this.progress.active == '2') {
            this.progress.activeName = '铁塔'
          } else if (this.progress.active == '3') {
            this.progress.activeName = '机房'
          }
          this.getOrderProgress()
          this.getOrderChange()
          this.getQrderChangeTotal()
          this.getOrderProgressTotal()
          this.getOrderProgressTrend()
        }
      }
    },
    handleTypeChange(code) {
      if (code == '1' || code == '2') {
        this.summaryData.selectName = '异常订单情况'
      } else if (code == '3' || code == '4') {
        this.summaryData.selectName = '白名单情况'
      } else if (code == '5' || code == '6') {
        this.summaryData.selectName = '已修正异常订单情况'
      }
      if (this.summaryData.active != code) {
        this.summaryData.active = code
        this.getBarLineData()
      }
    },
    //日期选择
    chooseDate() {
      this.datePicker.show = true
    },
    //取消日期设置
    handleCanleDate() {
      this.datePicker.show = false
    },
    //选择日期
    handleConfirmDate(value) {
      this.handleCanleDate()
      let date = new Date(value)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let month1 = month < 10 ? '0' + month : month
      let day1 = day < 10 ? '0' + day : day
      let chooseDate = year + '' + month1 + '' + day1
      if (this.datePicker.selectDate != chooseDate) {
        this.datePicker.showData = year + '年' + month + '月' + day + '日'
        this.datePicker.selectDate = chooseDate
        this.initPage()
      }
    },
    //获得时间域
    getMaxMinMonth() {
      function dateSplit(param) {
        let paramStr = param + ''
        let dateStr = paramStr.replace(/(.{2})/g,'$1,')
        let dateArr = dateStr.substr(0, dateStr.length - 1).split(',')
        return dateArr
      }
      return new Promise((resolve, reject) => {
        this.$http.post('/api/yearCheckIndex/maxMonth', {type: '5'}).then(data => {
          let max = data.maps[0].MAX_MONTH
          let min = data.maps[0].MIN_MONTH

          let maxYear = dateSplit(max)[0] + dateSplit(max)[1]
          let maxMonth = dateSplit(max)[2]
          let maxDay= dateSplit(max)[3]
          let minYear = dateSplit(min)[0] + dateSplit(min)[1]
          let minMonth = dateSplit(min)[2]
          let minDay= dateSplit(min)[3]
          let actualMaxMonth = parseInt(maxMonth) - 1
          let actualMinMonth = parseInt(minMonth) - 1
          let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
          let showMaxDay = maxDay[0] == '0' ? maxDay[1] : maxDay

          this.datePicker.currentDate = new Date(maxYear, actualMaxMonth, maxDay)
          this.datePicker.minDate = new Date(minYear, actualMinMonth, minDay)
          this.datePicker.maxDate = new Date(maxYear, actualMaxMonth, maxDay)

          this.datePicker.showData = maxYear + '年' + showMaxMonth + '月' + showMaxDay + '日'
          this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay

          resolve("ok")
        })
      })
    },
    //
    changeRankClass(value) {
      if (value > 0) {
        return 'trend--asc'
      } else if (value < 0) {
        return 'trend--desc'
      } else {
        return 'trend--zero'
      }
    },
    //获得全国各省列表
    getAreaInfo() {
      let params = {
        statMonth: this.datePicker.selectDate,
        areaId: this.areaId
      }

      this.$http
        .post("api/yearCheckIndex/getKpiAreaInfo", params)
        .then(data => {
          //获取省会
          if (data.rows.length > 1) {
            this.areaInfo.columns = []
            data.rows.forEach(item => {
              this.areaInfo.columns.push({
                text: item.area,
                id: item.areaId
              })
            })
            this.areaInfo.columns.unshift({ text: "全国", id: "100000" })
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.showArea = '全国'
          }
          //获取地市
          if (data.rows2.length > 1) {
            this.cityInfo.columns = []
            data.rows2.forEach(item => {
              this.cityInfo.columns.push({
                text: item.area,
                id: item.areaId
              });
            });
            this.cityInfo.columns.unshift({ text: "地市", id: "0" })
            this.areaInfo.selectId = data.rows[0].areaId
            this.areaInfo.showArea = data.rows[0].area
            if (this.role == "province") {
              this.areaInfo.columns.push(
                {
                  text: '全国', id: '100000'
                },
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              )
              this.areaInfo.defaultIndex = 1
            }
          } else if (data.rows2.length == 1 ) {
            if (this.role == "city") {
              let pro = this.areaId.substring(0,2) + '0000'
              this.areaInfo.selectId = data.rows[0].areaId
              this.areaInfo.showArea = data.rows[0].area
              this.areaInfo.columns = [
                {
                  text: data.rows[0].area,
                  id: data.rows[0].areaId
                }
              ]
              this.cityInfo.selectId = data.rows2[0].areaId
              this.cityInfo.showArea = data.rows2[0].area
              this.cityInfo.defaultIndex = 1
              this.cityInfo.columns = [
                {
                  text: '全省',
                  id: pro
                },
                {
                  text: data.rows2[0].area,
                  id: data.rows2[0].areaId
                }
              ]
            }
          }
        });
    },
    //记录日志
    recordLogs() {
      let params = {
        userId: this.userInfo.user_id,
        verify_code: this.userInfo.verify_code,
        priv_id: '10101756',
      }
      this.$http.post("api/new/insertLogs", params).then(res => {})
    },
    //获得稽核情况汇总
    getSummaryData() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.order.active
      }
      this.summaryData.dataLoading = true
      this.summaryData.data[0].num = ''
      this.summaryData.data[0].percentage = ''
      this.summaryData.data[1].num = ''
      this.summaryData.data[1].percentage = ''
      this.summaryData.data[2].num = ''
      this.summaryData.data[2].percentage = ''
      this.summaryData.data[3].num = ''
      this.summaryData.data[3].percentage = ''
      this.summaryData.data[4].num = ''
      this.summaryData.data[4].percentage = ''
      this.summaryData.data[5].num = ''
      this.summaryData.data[5].percentage = ''
      this.$http.post('/api/quality/quailtyList', params).then(res => {
        let list = res.quailtyList[0]
        this.summaryData.data[0].num = list.col1
        this.summaryData.data[0].percentage = list.col2
        this.summaryData.data[1].num = list.col3
        this.summaryData.data[1].percentage = list.col4
        this.summaryData.data[2].num = list.col5
        this.summaryData.data[2].percentage = list.col6
        this.summaryData.data[3].num = list.col7
        this.summaryData.data[3].percentage = list.col8
        this.summaryData.data[4].num = list.col9
        this.summaryData.data[4].percentage = list.col10
        this.summaryData.data[5].num = list.col11
        this.summaryData.data[5].percentage = list.col12
        this.summaryData.dataLoading = false
      })
    },
    //获得异常订单和白名单订单匹配趋势
    getLinesData() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.order.active
      }
      this.linesData.dataX = []
      this.linesData.data[0].values = []
      this.linesData.data[1].values = []
      this.$http.post('/api/quality/qrAudituDown', params).then(res => {
        let list = res.qrAudituDown
        list.forEach(item => {
          this.linesData.dataX.push(item.STAT_DATE)
          this.linesData.data[1].values.push(item.COL1)
          this.linesData.data[0].values.push(item.COL2)
        })
      })
    },
    //获得订单绑定资源柱图数据
    getBarLineData() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.order.active
      }
      this.barLineData.dataX = []
      this.barLineData.data[0].values = []
      this.barLineData.data[1].values = []
      let url = ''
      if (this.summaryData.active == '1' || this.summaryData.active == '2') {
        url = '/api/quality/qrAbnormalSituationData'
        this.barLineData.data[0].name = '异常订单数'
        this.barLineData.data[1].name = '异常订单占订单总数比'
      } else if (this.summaryData.active == '3' || this.summaryData.active == '4') {
        url = '/api/quality/qrProcessedData'
        this.barLineData.data[0].name = '白名单数量'
        this.barLineData.data[1].name = '白名单占订单总数比'
      } else if (this.summaryData.active == '5' || this.summaryData.active == '6') {
        url = '/api/quality/qrAuditupdateData'
        this.barLineData.data[0].name = '已修正异常订单数'
        this.barLineData.data[1].name = '已修正订单占异常订单比'
      }
      this.$http.post(url, params).then(res => {
        let list = []
        if (this.summaryData.active == '1' || this.summaryData.active == '2') {
          list = res.qrAbnormalSituationData
        } else if (this.summaryData.active == '3' || this.summaryData.active == '4') {
          list = res.qrProcessedData
        } else if (this.summaryData.active == '5' || this.summaryData.active == '6') {
          list = res.qrAuditupdateData
        }
        list.forEach(item => {
          this.barLineData.dataX.push(item.AREA_NAME)
          this.barLineData.data[0].values.push(item.COL1)
          this.barLineData.data[1].values.push(item.COL3)
        })
      })
    },
    //获得沉淀固化订单进度总览
    getOrderProgress() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.progress.active
      }
      this.orderProgressLoading = true
      this.orderProgress[0].num = ''
      this.orderProgress[0].percent = ''
      this.orderProgress[1].num = ''
      this.orderProgress[1].percent = ''
      this.orderProgress[2].num = ''
      this.orderProgress[2].percent = ''
      this.pieDataDetail.data = []
      this.pieDataCheck.data = []
      this.$http.post('/api/quality/curingList', params).then(res => {
        let list = res.qrAuditupdateData[0]
        let name1 = ''
        let name2 = ''
        this.orderProgress[0].num = list.COL1
        this.orderProgress[0].percent = list.COL4
        this.orderProgress[1].num = list.COL2
        this.orderProgress[1].percent = list.COL5
        this.orderProgress[2].num = list.COL3
        this.orderProgress[2].percent = list.COL6
        if (this.progress.active == '1') {
          name1 = '系统自动沉淀固化订单数量'
          name2 = '上报审核沉淀固化订单数量'
        } else if (this.progress.active == '2') {
          name1 = '系统自动沉淀固化铁塔数量'
          name2 = '上报审核沉淀固化铁塔数量'
        } else if (this.progress.active == '3') {
          name1 = '系统自动沉淀固化机房数量'
          name2 = '上报审核沉淀固化机房数量'
        }
        this.pieDataDetail.data.push(
          {
            name: name1,
            value: list.COL7,
            percentage: this.getPercentate(parseFloat(list.COL7), parseFloat(list.COL7) + parseFloat(list.COL8))
          },
          {
            name: name2,
            value: list.COL8,
            percentage: this.getPercentate(parseFloat(list.COL8), parseFloat(list.COL7) + parseFloat(list.COL8))
          }
        )
        this.pieDataCheck.data.push(
          {
            name: '有条件一致订单数量',
            value: list.COL9,
            percentage: this.getPercentate(parseFloat(list.COL9), parseFloat(list.COL9) + parseFloat(list.COL10))
          },
          {
            name: '无条件一致订单数量',
            value: list.COL10,
            percentage: this.getPercentate(parseFloat(list.COL10), parseFloat(list.COL9) + parseFloat(list.COL10))
          }
        )
        this.orderProgressLoading = false
      })
    },
    //求百分比
    getPercentate(value, total) {
      if (total == 0) {
        return 0
      } else {
        return ((value / total)*100).toFixed(2)
      }
    },
    //获得沉淀固化订单变动详情
    getOrderChange() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.progress.active
      }
      this.orderChangeLoading = true
      this.orderChange[0].num = ''
      this.orderChange[0].percent = ''
      this.orderChange[1].num = ''
      this.orderChange[1].percent = ''
      this.orderChange[2].num = ''
      this.orderChange[2].percent = ''
      this.$http.post('/api/quality/curingdetails', params).then(res => {
        let list = res.curingdetail[0]
        this.orderChange[0].num = list.COL5
        this.orderChange[0].percent = list.COL6
        this.orderChange[1].num = list.COL1
        this.orderChange[1].percent = list.COL3
        this.orderChange[2].num = list.COL2
        this.orderChange[2].percent = list.COL4
        this.orderChangeLoading = false
      })
    },
    //获得整体情况
    getQrderChangeTotal() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.progress.active
      }
      this.orderChangeTotal.dataX = []
      this.orderChangeTotal.data[0].values = []
      this.orderChangeTotal.data[1].values = []
      this.$http.post('/api/quality/curingdetailDown', params).then(res => {
        let list = res.curingdetail
        if (this.progress.active == '1') {
          this.orderChangeTotal.data[0].name = '系统自动沉淀固化塔类订单变动数量'
          this.orderChangeTotal.data[1].name = '上报审核沉淀固化塔类订单变动数量'
        } else if (this.progress.active == '2') {
          this.orderChangeTotal.data[0].name = '系统自动沉淀固化铁塔资源变动数量'
          this.orderChangeTotal.data[1].name = '上报审核沉淀固化铁塔资源变动数量'
        } else if (this.progress.active == '3') {
          this.orderChangeTotal.data[0].name = '系统自动沉淀固化机房资源变动数量'
          this.orderChangeTotal.data[1].name = '上报审核沉淀固化机房资源变动数量'
        }
        list.forEach(item => {
          this.orderChangeTotal.dataX.push(item.AREA_NAME)
          this.orderChangeTotal.data[0].values.push(item.COL1)
          this.orderChangeTotal.data[1].values.push(item.COL2)
        })
      })
    },
    //沉淀固化进度整体情况
    getOrderProgressTotal() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.progress.active
      }
      this.orderProgressTotal.dataX = []
      this.orderProgressTotal.data[0].values = []
      this.orderProgressTotal.data[1].values = []
      this.orderProgressTotal.data[2].values = []
      this.$http.post('/api/quality/curingOverall', params).then(res => {
        let list = res.qrAuditupdateData
        list.forEach(item => {
          if (this.progress.active == '1') {
            this.orderProgressTotal.data[0].name = '已起租塔类订单数量'
            this.orderProgressTotal.data[1].name = '沉淀固化塔类订单数量'
            this.orderProgressTotal.data[2].name = '沉淀固化塔类订单占已起租塔类订单比'
          } else if (this.progress.active == '2') {
            this.orderProgressTotal.data[0].name = '铁塔资源数量'
            this.orderProgressTotal.data[1].name = '沉淀固化铁塔资源数量'
            this.orderProgressTotal.data[2].name = '沉淀固化铁塔资源占铁塔资源比'
          } else if (this.progress.active == '3') {
            this.orderProgressTotal.data[0].name = '机房资源数量'
            this.orderProgressTotal.data[1].name = '沉淀固化机房资源数量'
            this.orderProgressTotal.data[2].name = '沉淀固化机房资源占机房资源比'
          }
          this.orderProgressTotal.dataX.push(item.AREA_NAME)
          this.orderProgressTotal.data[2].values.push(item.COL1)
          this.orderProgressTotal.data[1].values.push(item.COL2)
          this.orderProgressTotal.data[0].values.push(item.COL3)
        })
      })
    },
    //沉淀固化进度变化趋势
    getOrderProgressTrend() {
      let params = {
        statDate: this.datePicker.selectDate,
        areaId: this.areaId,
        type: this.progress.active
      }
      this.orderProgressTrend.dataX = []
      this.orderProgressTrend.data[0].values = []
      this.orderProgressTrend.data[1].values = []
      this.orderProgressTrend.data[2].values = []
      this.$http.post('/api/quality/curingdata', params).then(res => {
        let list = res.curingdetail
        list.forEach(item => {
          if (this.progress.active == '1') {
            this.orderProgressTrend.data[0].name = '已起租塔类订单数量'
            this.orderProgressTrend.data[1].name = '沉淀固化塔类订单数量'
            this.orderProgressTrend.data[2].name = '沉淀固化塔类订单占已起租塔类订单比'
          } else if (this.progress.active == '2') {
            this.orderProgressTrend.data[0].name = '铁塔资源数量'
            this.orderProgressTrend.data[1].name = '沉淀固化铁塔资源数量'
            this.orderProgressTrend.data[2].name = '沉淀固化铁塔资源占铁塔资源比'
          } else if (this.progress.active == '3') {
            this.orderProgressTrend.data[0].name = '机房资源数量'
            this.orderProgressTrend.data[1].name = '沉淀固化机房资源数量'
            this.orderProgressTrend.data[2].name = '沉淀固化机房资源占机房资源比'
          }
          this.orderProgressTrend.dataX.push(item.STAT_DATE)
          this.orderProgressTrend.data[2].values.push(item.COL1)
          this.orderProgressTrend.data[1].values.push(item.COL2)
          this.orderProgressTrend.data[0].values.push(item.COL3)
        })
      })
    },
    //页面初始化
    initPage() {
      this.getSummaryData()
      this.getLinesData()
      this.getBarLineData()
      this.getOrderProgress()
      this.getOrderChange()
      this.getQrderChangeTotal()
      this.getOrderProgressTotal()
      this.getOrderProgressTrend()
    }
  },
  created() {
    this.recordLogs()
    this.getMaxMinMonth().then(res => {
      if (res == 'ok') {
        this.getAreaInfo()
        this.initPage()
      }
    })
  }
};
</script>

<style lang="scss" scoped>
  .case-title {
    padding-left: 22px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      background: url(~@/assets/images/icon-business.png);
      background-size: 100% 100%;
      left: 0;
      top: 50%;
      margin-top: -8px;
    }

    &__name {
      font-size: 18px;
    }
  }

  .business-intro {
    overflow: hidden;
    padding-top: 5px;
    margin-bottom: 10px;

    &__main {
      margin: -5px;
      overflow: hidden;
    }

    &__item {
      float: left;
      width: 50%;
      padding: 5px;
      box-sizing: border-box;
    }

    &__inner {
      text-align: center;
      border: 1px solid #e7e7e7;
      padding: 8px 0;
      border-radius: 8px;

      &--current {
        border-color: #ff7171;
      }
    }

    &__num {
      font-size: 20px;
    }

    &__intro {
      margin-bottom: 6px;
    }

    &__label {
      display: inline-block;
      border: 1px solid;
      padding: 0 6px;
      border-radius: 2px;
    }

    .van-loading {
      display: inline-block;
    }
  }

  .projects {
    overflow: hidden;

    &__main {
      overflow: hidden;
      margin: -5px;
    }

    &__item {
      float: left;
      box-sizing: border-box;
      padding: 5px;
    }

    &__inner {
      display: block;
      text-align: center;
      border: 1px solid #E5E5E5;
      line-height: 2.25;
      border-radius: 5px;
      font-size: 13px;

      &--current {
        background: #F7777C;
        color: #fff;
        border-color: #F7777C;
      }
    }
  }

  .data-panel {
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    padding: 0 15px;

    &__item {
      padding: 10px 0;

      & + & {
        border-top: 1px solid #E5E5E5;
      }
    }

    &__name {
      margin-bottom: 5px;
    }

    &__blocks {
      display: flex;
      align-items: baseline;
    }

    &__block {
      flex: 1;
    }

    &__num {
      font-size: 20px;
    }

    .van-loading {
      display: inline-block;
    }
  }

  /deep/
  .resolve-tabs.van-tabs--line .van-tabs__wrap {
    padding-left: 10px;
    padding-right: 10px;
  }

  .selects__item--date {
    flex: none;
    width: 33%;
  }
</style>
